import React, {Component} from 'react';
//import pureRender from 'pure-render-decorator';
import {History, Link } from 'react-router';
import { connect } from 'react-redux';
import { OrderAll } from '../Redux/Actions/orderAction';
import { InvoiceGet } from '../Redux/Actions/invoiceAction';
import { is, fromJS} from 'immutable';


class Order extends Component {
    constructor() {
        super();
        this.state = {
            activeLi:1,
            ordervalue:""
        }
    }

    componentWillMount(){
        this.props.dispatch(OrderAll(this.props.authReducer.user.data.token));
        this.props.dispatch(InvoiceGet(this.props.authReducer.user.data.token));
    }


    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
    }

    cateChange = (num)=>{
        this.setState({
            activeLi:num
        })
    }

    inputchange = (event)=>{
        this.setState({
            activeLi:4,
            ordervalue:event.target.value
        })
    }

    render() {
        document.title="全部订单";
        const orderall = this.props.orderReducer.order.data;
        const invoice = this.props.invoiceReducer.invoice.data;
        let listall = [];
        if(this.state.activeLi === 1){
            for(let i in orderall){
                let spancolor = '';
                if(orderall[i].state === "going"){
                    spancolor = "icon iconfont icon-jinxingzhong blue"
                }else{
                    spancolor = "icon iconfont icon-jinxingzhong grey"
                }
                listall.push(
                    <li key={i}>
                        <Link to={{pathname:"/orderdetail",state:{orderId:orderall[i].id,invoice:invoice}}} >
                            <div>
                                <span className={spancolor}></span>
                            </div>
                            <div>
                                <p>{orderall[i].carFrameNo}/{orderall[i].carType}</p>
                                <p>{orderall[i].id}</p>
                            </div>
                            <span className="icon iconfont icon-you right-arrow"></span>
                        </Link>
                    </li>)
            }
        }else if(this.state.activeLi === 2){
            for(let i in orderall){
                let spancolor = '';
                if(orderall[i].state === "finish"){
                    spancolor = "icon iconfont icon-jinxingzhong blue"
                    listall.push(
                        <li key={i}>
                            <Link to={{pathname:"/orderdetail",state:{orderId:orderall[i].id,invoice:invoice}}} >
                                <div>
                                    <span className={spancolor}></span>
                                </div>
                                <div>
                                    <p>{orderall[i].carFrameNo}/{orderall[i].carType}</p>
                                    <p>{orderall[i].id}</p>
                                </div>
                                <span className="icon iconfont icon-you right-arrow"></span>
                            </Link>
                        </li>)
                }
            }
        }else if(this.state.activeLi === 3){
            for(let i in orderall){
                let spancolor = '';
                if(orderall[i].state === "cancel"){
                    spancolor = "icon iconfont icon-jinxingzhong grey"
                    listall.push(
                        <li key={i}>
                            <Link to={{pathname:"/orderdetail",state:{orderId:orderall[i].id,invoice:invoice}}} >
                                <div>
                                    <span className={spancolor}></span>
                                </div>
                                <div>
                                    <p>{orderall[i].carFrameNo}/{orderall[i].carType}</p>
                                    <p>{orderall[i].id}</p>
                                </div>
                                <span className="icon iconfont icon-you right-arrow"></span>
                            </Link>
                        </li>)
                }
            }
        }else{
            for(let i in orderall){
                let spancolor = '';
                if(orderall[i].state === "going"){
                    spancolor = "icon iconfont icon-jinxingzhong blue"
                }else{
                    spancolor = "icon iconfont icon-jinxingzhong grey"
                }
                if(orderall[i].carType.indexOf(this.state.ordervalue) >= 0 || orderall[i].carFrameNo.indexOf(this.state.ordervalue) >= 0 ||orderall[i].id.indexOf(this.state.ordervalue)>=0){
                    listall.push(
                    <li key={i}>
                        <Link to={{pathname:"/orderdetail",state:{orderId:orderall[i].id,invoice:invoice}}} >
                            <div>
                                <span className={spancolor}></span>
                            </div>
                            <div>
                                <p>{orderall[i].carFrameNo}/{orderall[i].carType}</p>
                                <p>{orderall[i].id}</p>
                            </div>
                            <span className="icon iconfont icon-you right-arrow"></span>
                        </Link>
                    </li>)
                }
            }
        }
        
        return (
            <div className="main-wrap bg-grey">
                <div className="order-search">
                    <input type="text" value={this.state.ordervalue} placeholder="请输入您要查找的订单" onChange={this.inputchange}/>
                </div>
                <ul className="order-title">
                    <li className={this.state.activeLi === 1?"active":""} onClick={this.cateChange.bind(this,1)}>所有订单</li>
                    <li className={this.state.activeLi === 2?"active":""} onClick={this.cateChange.bind(this,2)}>已完成</li>
                    <li className={this.state.activeLi === 3?"active":""} onClick={this.cateChange.bind(this,3)}>已取消</li>
                </ul>
                <ul className="order-list">
                    {listall}
                </ul>
            </div>
        )
    }
}


export default connect((state) => {
    const { authReducer,orderReducer,invoiceReducer } = state;
    return {
        authReducer,orderReducer,invoiceReducer
    }
})(Order);